
// 定义获取任意区间[min,max)随机函数
var gr=function(min,max){
    return Math.floor(Math.random()*(max-min)+min);
    
}
//随机产生颜色
var rc= function(min,max){
    var r= gr(min,max);
    var g= gr(min,max);
    var b= gr(min,max);
    // return "rgb("+r+","+g+","+b+")";
    return `rgb(${r},${g},${b})`;
}

//获取4位验证码文本
var getCode=function(){
    var code="";
    var str="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    var arr=str.split("");//将字符串分隔为由其每个字符组成的数组
    for(var i=0,index=0;i<4;i++){               
        index=Math.floor(Math.random()*arr.length);//获取0-61的随机数作为索引
        code+=arr[index];//获取索引对应的字符
    }            
    return code;
}           
//定义生成图形验证码
var draw=function(){
        //获得canvas对象
    var canvas=document.getElementById("canvas1");
    //获得2d上下文对象，该对象提供了一系列属性和方法来绘制图形           
    var cxt=canvas.getContext("2d");
    var w=canvas.clientWidth;//画布宽度,图形宽度及坐标x轴不能超过w
    var h=canvas.clientHeight;//画布高度
    console.log(w,h);
    //从左上角开始绘制一个与画布一般大小的矩形并填充随机颜色(形成背景色)
    cxt.fillStyle=rc(180,230);  
    cxt.fillRect(0,0,w,h);
    //获取随机生成的验证码
    var yzm=getCode();
    console.log(yzm);
        //绘制验证码文本
    cxt.font="italic bold 30px SimHei";
    cxt.strokeStyle=rc(0,255);
    cxt.strokeText(yzm,25,35);
        //绘制10条干扰线
    for(var i=0;i<10;i++){
        cxt.beginPath();
        cxt.lineWidth=1;//设置线条宽度，px
        cxt.strokeStyle=rc(0,255);//设置笔触的颜色
        cxt.moveTo(gr(0,w),gr(0,h));
        cxt.lineTo(gr(0,w),gr(0,h));
        cxt.closePath();
        cxt.stroke();
    }
        //绘制50个干扰点
    for(var i=0;i<50;i++){
        cxt.fillStyle=rc(0,256);
        cxt.beginPath();
        cxt.arc(gr(0,w),gr(0,h),1,0,2*Math.PI);//实心圆点
        cxt.fill();
    }
    return yzm;
}
//页面加载时生成验证码,将生成的验证码文本保存到_yzm中
var _yzm=draw().toLowerCase();
    console.log(_yzm)
//点击看不清重新生成验证码
var reDraw=function(){
    _yzm=draw().toLowerCase();
}
//点击画布也重新生成验证码
document.getElementById("canvas1").onclick=()=>{
    _yzm=draw().toLowerCase();
} 

//验证输入的验证码是否正确
var checkCode=function(){
    //获取输入的验证码
    var iyzm=document.getElementById("input-yzm");
    var shuRu=iyzm.value.toLowerCase();//统一转小写作比较
    console.log(shuRu,_yzm);
    var info=document.getElementById("info");
    if(shuRu==_yzm){      
        info.innerHTML="";
        alert("验证码输入正确");
    }else{
        info.innerHTML="验证码输入错误,请重新输入"
        iyzm.value="";//清空
        //验证码输入框聚焦
        iyzm.focus();
    }
}
